import React, { useState } from "react";

// 摄氏度
class Celsius extends React.Component {

    render() {
        const { value, onChange } = this.props
        let changeSet = (e) => {
            onChange(Number((e.target.value) - 32) * 5 / 9)
        }
        return (
            <div>
                <label >摄氏度:</label>
                <input type="text" value={value * 9 / 5 + 32} onChange={changeSet} />
            </div>
        )
    }
}

// 华氏度
function Fahrenheit(props) {
    let { value, onChange } = props;
    let changeSet = (e) => {
        console.log(e.target.value)
        onChange(e.target.value)  // 调用的是父组件中的changeSet函数
    }
    return (
        <div>
            <label >华氏度:</label>
            <input type="text" value={value} onChange={changeSet} />
        </div>
    )
}

export default function DemoA() {
    const [temper, setTemper] = useState(0)
    // 父组件中的changeSet 被子组件调用并且传递了 参数
    // let changeSet = (value) => {
    //     // 在组件中 使用setTemper 方法去修改temper状态
    //     // 修改状态需要 re-render
    //     setTemper(value)
    // }
    return (
        <div>
            <Fahrenheit value={temper} onChange={val => setTemper(val)}></Fahrenheit>
            <hr />
            <Celsius value={temper} onChange={val => setTemper(val)}></Celsius>
        </div>
    )
}

